JavaScript 入門

學習Vue開發技術，JavaScript和TypeScript是基礎

JavaScript

• 前面兩篇介紹的HTML建構了一個網頁的骨架、CSS則是外表的裝扮，而今天要介紹的JavaScript就是一個網頁的靈魂，要使網頁能夠與使用者互動需要透過JavaScript來達成。
• JavaScript能動態改變HTML元件的內容，可直接對標籤元素的屬性設定及修改，或是對HTML檔案中的元素進行增刪。

變數

• 可使用var、let來定義變數，無須在乎變數的類型，

運算式

• 運算式是由運算子及運算數組成，運算數可為任意類型的資料或變數。
• 運算子
  1. 算術運算：+、-、*、/
  2. 比較運算：<、>、<=、>=
  3. 邏輯運算：&&、｜｜、!
  4. 位元運算：＆、｜、＾、～、<<、>>、>>>

函數

• 函數是程式的功能單元，JavaScript定義函數的方式有兩種：
  1. function關鍵字：
  2. 箭頭函數：

function func1(param) {
    console.log("執行func1" + param);
}

function func2 = (param) => {
    console.log("執行func2" + param);
}

條件

• 根據條是否成立來執行不同邏輯，使用if和else來實現，也可使用switch和case關鍵字多分支敘述。
  1. if & else
  2. switch & case

var i = 0;
var j = 1;
if (i < j) {
    console.log("i < j")
}else if (i == j) {
    console.log("i == j")
}else{
    console.log("i > j")
}

var u = 0
switch (u) {
    case 0:
        console.log("0")
        break
    case 1:
        console.log("1")
        break
    default:
        console.log("-")
}

迴圈

• 重複執行某段程式邏輯時，可用while迴圈及for迴圈：

var v = 5
while (v > 0){
    v --
    console.log(v)
}
for (v = 0; v < 5; v++){
    console.log(v)
}

以上是Javascript的基礎入門，除此之外還有許多語法及物件導向能力可以探索，有興趣可以觀看原書。

從JavaScript到TypeScript

JavaScript的所有語法都適用於TypeScript，不過TypeScript的功能更多元、更強

• 兩者之間主要區別有：

  1. 物件導向能力：TypeScript提供更多物件導向程式的特性，在JavaScript的基礎上增加了類別、模組、介面等功能。這些差別在越大的專案上，差異越明顯。
  2. 靜態類型功能：TypeScript要求變數要有明確的類型，這對大型專案十分重要，特別是後期維護時，可透過靜態檢查發現錯誤。除此之外，TypeScript還有提供泛型、列舉、類型推論等高級功能。
  3. 函數功能增強：TypeScript可預設參數值，引入裝飾器、迭代器和生成器的語法，這些功能增強了他的可用性、大大提升了效率。

• 綜上所述，對大型專案而言TypeScript從開發效率、可維護性、程式品質上都具明顯優勢，是未來發展的方向！但對簡易程式而還是可以使用目前更普及的JavaScript。

以上是JavaScript的入門介紹，下一篇將要開始學習新事物:介紹漸進式開發框架 Vue !